<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>答题页面</title>
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">


</head>

<body>
<style>
    .el-row {
        margin: 20px;

    }

    .text {
        font-size: 14px;
    }

    .item {
        margin-bottom: 18px;
    }

    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }

    .clearfix:after {
        clear: both
    }

    .box-card {
        margin-bottom: 30px;
        margin-left: 300px;
    }

    .el-cascader {
        margin-right: 15px;
    }

    .custom-tree-node {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 14px;
        padding: 10px;
    }
</style>
<div id="app">

    <el-row>
        <el-col>
            <el-alert title="答题页面" type="success" effect="light" :closable="false" center></el-alert>
        </el-col>

    </el-row>
    <el-row>
        <el-cascader v-model="value" :options="options" @change="selectType"></el-cascader>
        <el-button type="success" plain @click="dialogFormVisible = true">新增题目</el-button>
        <el-button type="success" plain @click="dialogTreeVisible = true">修改类型</el-button>
        <el-button type="success" plain>查看题目知识点</el-button>
        <el-button type="success" plain>跳转学习页面</el-button>
        <el-button type="success" plain @click="toFile()">跳转下载页面</el-button>

    </el-row>
    <el-row>
        <el-col :span="20">

            <el-card class="box-card" v-for="(p,index) in problems" :key="p.id" shadow="always" visable="false">

                <div slot="header" class="clearfix">
                    <span>第{{index+1}}题：{{p.title}}</span>
                </div>
                <div><el-button type="text" @click="checkAnswer(index, p, 1)">选项A：{{p.choiceA}}</el-button></div>
                <div><el-button type="text" @click="checkAnswer(index, p, 2)">选项B：{{p.choiceB}}</el-button></div>
                <div><el-button type="text" @click="checkAnswer(index, p, 3)">选项C：{{p.choiceC}}</el-button></div>
                <div><el-button type="text" @click="checkAnswer(index, p, 4)">选项D：{{p.choiceD}}</el-button></div>

            </el-card>

        </el-col>
    </el-row>
    <el-row>
        <el-dialog title="新增题目" :visible.sync="dialogFormVisible">
            <el-form :model="form">
                <el-form-item label="题目类型" :label-width="formLabelWidth">
                    <el-cascader v-model="value" :options="options" @change="selectType"></el-cascader>
                </el-form-item>

                <el-form-item label="题目标题" :label-width="formLabelWidth">
                    <el-input v-model="form.title" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="选项A" :label-width="formLabelWidth">
                    <el-input v-model="form.choiceA" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="选项B" :label-width="formLabelWidth">
                    <el-input v-model="form.choiceB" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="选项C" :label-width="formLabelWidth">
                    <el-input v-model="form.choiceC" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="选项D" :label-width="formLabelWidth">
                    <el-input v-model="form.choiceD" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="题目答案" :label-width="formLabelWidth">
                    <el-select v-model="form.answer" placeholder="请选择ABCD">
                        <el-option label="A" value="1"></el-option>
                        <el-option label="B" value="2"></el-option>
                        <el-option label="C" value="3"></el-option>
                        <el-option label="D" value="4"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="答案解析" :label-width="formLabelWidth">
                    <el-input v-model="form.parse" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitProblem()">确 定</el-button>
            </div>
        </el-dialog>
    </el-row>
    <el-row>
        <el-dialog title="修改类型" :visible.sync="dialogTreeVisible">

            <el-input placeholder="请输入新类型名称" v-model="inputType" clearable></el-input>

            <el-tree :data="options" node-key="id" show-checkbox accordion :expand-on-click-node="false">
                    <span class="custom-tree-node" slot-scope="{ node, data }">
                        <span>{{ node.label }}</span>
                        <span>
                            <el-button type="text" @click="() => appendNode(data)">
                                新增子节点
                            </el-button>
                            <el-button type="text" @click="() => removeNode(node, data)">
                                删除当前节点
                            </el-button>
                        </span>
                    </span>
            </el-tree>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogTreeVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogTreeVisible = false">确 定</el-button>
            </div>
        </el-dialog>
    </el-row>




</div>
</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>

    // var baseUrl = "http://127.0.0.1:12345";
    var baseUrl = "http://westudy.life:12345";

    var app = new Vue({
        el: "#app",
        data() {
            return {
                value: 0,
                inputType: '',
                options: [],
                problems: [],
                dialogFormVisible: false,
                dialogTreeVisible: false,
                form: {
                    title: '',
                    choiceA: '',
                    choiceB: '',
                    choiceC: '',
                    choiceD: '',
                    answer: '',
                    parse: ''
                },
                formLabelWidth: '120px'

            }
        },
        methods: {
            selectType(data) {

                var id = data[data.length - 1];
                this.value = id;
                console.log(id);
                var http = new XMLHttpRequest();
                var get = baseUrl + "/problem/selectProblemList?typeId=" + id;
                http.open("GET", get);
                http.send();
                var list = [];
                var self = this;
                http.onreadystatechange = async function () {
                    var res = http.responseText;
                    if (res != null && res.length != 0) {
                        list = JSON.parse(res);
                        console.log(list);
                        self.$data.problems = Array.from(list);
                    }
                };

            },
            checkAnswer(index, p, choice) {
                if (p.answer == choice) {
                    this.$message({
                        message: '恭喜你，回答正确，获得了10金币',
                        type: 'success'
                    });
                } else {
                    this.$notify({
                        title: '回答错误，题目解析如下',
                        message: p.parse,
                        type: 'error',
                        duration: 0
                    });
                }
                this.problems.splice(index, 1);
            },
            submitProblem() {
                this.dialogFormVisible = false
                console.log(this.form);
                var data = this.form;
                console.log(this.value);
                var post = baseUrl + "/problem/submitProblem";
                var http = new XMLHttpRequest();
                //设置发送数据的请求格式

                http.open("POST", post);
                http.setRequestHeader('content-type', 'application/json');
                var sendData = {
                    'typeId': this.value, 'title': data.title,
                    'choiceA': data.choiceA, 'choiceB': data.choiceB,
                    'choiceC': data.choiceC, 'choiceD': data.choiceD,
                    'answer': data.answer, 'parse': data.parse
                };
                http.send(JSON.stringify(sendData));
            },
            toFile() {
                var get = baseUrl + "/file.html";
                window.open(get, "_blank");
            },

            appendNode(data) {

                var pName = data.label;
                console.log("append node, pid is " + pName + "label is " + pName);

                var http = new XMLHttpRequest();
                var get = baseUrl + "/type/addChildType?pName=" + pName + "&nodeName=" + this.inputType;
                http.open("GET", get);
                http.send();

                var newChild = { id: pName + "123", label: this.inputType, children: [] };
                if (!data.children) {
                    this.$set(data, 'children', []);
                }
                data.children.push(newChild);






            },
            removeNode(node, data) {

                console.log("remove node, label is " + node.label + ", data is " + data.value);
                const parent = node.parent;
                console.log(parent);
                const children = parent.data.children || parent.data;
                console.log(children);
                const index = children.findIndex(d => d.id === data.id);
                children.splice(index, 1);

                var http = new XMLHttpRequest();
                var get = baseUrl + "/type/removeType?name=" + node.label;
                http.open("GET", get);
                http.send();

            }
        }
    });

    function setScanData() {

        var http = new XMLHttpRequest();
        var get = baseUrl + "/type/selectTreeNode";
        http.open("GET", get);
        http.send();
        var list = [];
        var self = this;
        http.onreadystatechange = async function () {
            var res = http.responseText;
            if (res != null && res.length != 0) {
                list = JSON.parse(res);
                app.$data.options = Array.from(getTreeData(list));
            }
        };

    }

    function getTreeData(data) {
        // 循环遍历json数据
        for (var i = 0; i < data.length; i++) {

            if (data[i].children.length < 1) {
                // children若为空数组，则将children设为undefined
                data[i].children = undefined;
            } else {
                // children若不为空数组，则继续 递归调用 本方法
                this.getTreeData(data[i].children);
            }
        }
        return data;
    }
    setScanData();

</script>

</html>